<template>
  <div class="sidebar-item" :data-active-id="bookActiveId">
    <template  v-for="(m,index) in menu"  >
    <el-menu-item :index="m.id" v-if="m.type === 1" :key="m.id" @click="openSection(m)">
      <i class="el-icon-document" ></i>
<!--  折叠{ 第一层：不显示 ，其他显示}    -->
      <template v-if="collapse">
        <span v-if="deep !== 0">{{m.name}}</span>
      </template>
      <template v-else>
        <span >{{m.name}}</span>
      </template>
    </el-menu-item>
    <el-submenu :index=" m.id" :key="m.id" v-if="m.type === 0">
      <template slot="title" >
        <i class="el-icon-folder" ></i>
        <span v-if="!collapse"><span v-if="deep === 0 ">第{{index + 1}}章</span>{{m.name}}</span>
      </template>
      <el-menu-item-group v-if="!m.hasChildren">
        <sidebar-item :menu="m.children" :collapse="collapse" :deep="deep+1"></sidebar-item>
      </el-menu-item-group>
    </el-submenu>
    </template>
  </div>
</template>

<script>
import Constants from "@/Constants";
import {mapGetters} from "vuex";

export default {
  name: "sidebarItem" ,
  props:{
    deep:{
      type:Number ,
      default: 0
    },
    menu:{
      type: Array ,
      default(){
        return []
      }
    },
    collapse: {
      type: Boolean ,
      default: false
    }
  },
  mounted() {
    // this.$router.push("/section/"+this.bookActiveId);
  },
  methods:{
    openSection(m){
      this.$router.push("/section/"+m.id);
      this.$store.commit(Constants.setBookActiveId , m.id) ;
    }
  },
  computed:{
    ...mapGetters(["bookActiveId"]),
  }
}
</script>

<style scoped>

</style>
